<template>
  <div class="dashboard-container">
    <!-- 用户信息卡片 -->
    <el-card class="user-info-card">
      <div class="card-main">
        <el-avatar :size="100" :src="userInfo.avatar" icon="User"></el-avatar>
        <div>
          <div class="card-main-text">{{ getTimeOfDay() }}好 {{ userInfo.nickname }}</div>
          <div>欢迎来到博客管理系统</div>
        </div>
      </div>
    </el-card>

    <!-- 顶部统计卡片 -->
    <el-row :gutter="10" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-icon user-icon"><User /></div>
          <el-statistic :value="userCountValue">
            <template #title><h3>用户量</h3></template>
            <template #suffix>总用户量</template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-icon view-icon">1</div>
          <el-statistic :value="viewCountValue">
            <template #title><h3>访问量</h3></template>
            <template #suffix>总访问</template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-icon download-icon"><Download /></div>
          <el-statistic :value="downloadCountValue">
            <template #title><h3>下载量</h3></template>
            <template #suffix>总下载</template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-icon usage-icon"><Timer /></div>
          <el-statistic :value="usageCountValue">
            <template #title><h3>使用量</h3></template>
            <template #suffix>总使用量</template>
          </el-statistic>
        </el-card>
      </el-col>
    </el-row>

    <!-- 主要图表区域 -->
    <el-row :gutter="10" class="charts-row">
      <el-col :span="24">
        <el-card class="chart-card full-width-chart">
          <div slot="header" class="chart-header">
            <h2>流量趋势</h2>
            <el-tabs v-model="timeDimension" class="chart-tabs" size="small">
              <el-tab-pane label="小时趋势" name="hour"></el-tab-pane>
              <el-tab-pane label="月度趋势" name="month"></el-tab-pane>
            </el-tabs>
          </div>
          <EchartComponent :option="currentTrendOption" height="300px" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 次要图表区域 -->
    <el-row :gutter="10" class="charts-row">
      <el-col :span="8">
        <el-card class="chart-card">
          <h2 slot="header">访问设备分布</h2>
          <EchartComponent :option="deviceDistributionOption" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <h2 slot="header">访问来源分析</h2>
          <EchartComponent :option="sourceAnalysisOption" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="chart-card">
          <h2 slot="header">内容类型分布</h2>
          <EchartComponent :option="contentTypeOption" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  import { useUserStore } from '@/stores/userStore'
  import { useTransition } from '@vueuse/core'
  import { storeToRefs } from 'pinia'
  import EchartComponent from '@/components/EchartComponent/index.vue'
  // import { User, Download, Timer } from '@element-plus/icons-vue'
  import * as echarts from 'echarts'

  const userStore = useUserStore()
  const { userInfo } = storeToRefs(userStore)

  // 统计数据
  const userCount = ref(120000)
  const userCountValue = useTransition(userCount, { duration: 1500 })
  const viewCount = ref(500000)
  const viewCountValue = useTransition(viewCount, { duration: 1500 })
  const downloadCount = ref(120000)
  const downloadCountValue = useTransition(downloadCount, { duration: 1500 })
  const usageCount = ref(50000)
  const usageCountValue = useTransition(usageCount, { duration: 1500 })

  // 流量趋势图表数据
  const trafficTrendOption = ref<echarts.EChartsOption>({
    tooltip: { type: 'axis', trigger: 'axis' },
    legend: { data: ['月访问量', '日活跃用户'] },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '6:00',
        '7:30',
        '9:00',
        '10:30',
        '12:00',
        '13:30',
        '15:00',
        '16:30',
        '18:00',
        '19:30',
        '21:00',
        '22:30',
        '24:00'
      ]
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '月访问量',
        type: 'line',
        data: [
          5000, 12000, 35000, 42000, 48000, 52000, 58000, 65000, 60000, 52000, 40000, 25000, 15000
        ],
        smooth: true,
        itemStyle: { color: '#409EFF' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(64, 158, 255, 0.5)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
          ])
        },
        lineStyle: { width: 3 }
      },
      {
        name: '日活跃用户',
        type: 'line',
        data: [
          2000, 5000, 15000, 18000, 20000, 22000, 25000, 28000, 25000, 22000, 18000, 12000, 8000
        ],
        smooth: true,
        itemStyle: { color: '#20C997' },
        lineStyle: { width: 3 }
      }
    ]
  })

  // 月度趋势图表数据
  const monthTrendOption = ref<echarts.EChartsOption>({
    tooltip: { type: 'axis', trigger: 'axis' },
    legend: { data: ['月访问量'] },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: { type: 'value' },
    series: [
      {
        name: '月访问量',
        type: 'bar',
        data: [3200, 2800, 3500, 5000, 3800, 4200, 3900, 3300, 3600, 4800, 5900, 6200],
        itemStyle: { color: '#409EFF' }
      }
    ]
  })

  // 切换逻辑
  const timeDimension = ref('hour')
  const currentTrendOption = computed(() => {
    return timeDimension.value === 'hour' ? trafficTrendOption.value : monthTrendOption.value
  })

  // 设备分布雷达图
  const deviceDistributionOption = ref<echarts.EChartsOption>({
    tooltip: { trigger: 'item' },
    radar: {
      indicator: [
        { name: '网页', max: 100 },
        { name: '移动端', max: 100 },
        { name: '客户端', max: 100 },
        { name: 'iPad', max: 100 },
        { name: '第三方', max: 100 },
        { name: '其他', max: 100 }
      ]
    },
    series: [
      {
        name: '访问设备',
        type: 'radar',
        data: [
          {
            value: [80, 90, 60, 40, 30, 20],
            name: '访问占比',
            areaStyle: { color: 'rgba(64, 158, 255, 0.2)' },
            lineStyle: { color: '#409EFF' },
            itemStyle: { color: '#409EFF' }
          }
        ]
      }
    ]
  })

  // 访问来源饼图
  const sourceAnalysisOption = ref<echarts.EChartsOption>({
    tooltip: { type: 'item' },
    // legend: { orient: 'vertical', left: 'center', top: 'center' },
    legend: { orient: 'horizontal', left: 'center', top: 'bottom' },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: { show: false, position: 'center' },
        emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
        labelLine: { show: false },
        data: [
          { value: 40, name: '搜索引擎', itemStyle: { color: '#409EFF' } },
          { value: 25, name: '直接访问', itemStyle: { color: '#20C997' } },
          { value: 15, name: '邮件营销', itemStyle: { color: '#F7BA1E' } },
          { value: 10, name: '联盟广告', itemStyle: { color: '#F56C6C' } },
          { value: 10, name: '其他', itemStyle: { color: '#909399' } }
        ]
      }
    ]
  })

  // 内容类型分布柱状图
  const contentTypeOption = ref<echarts.EChartsOption>({
    tooltip: { type: 'axis', trigger: 'axis' },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { type: 'category', data: ['文章', '视频', '图片', '音频', '文档'] },
    yAxis: { type: 'value' },
    series: [
      {
        data: [320, 280, 180, 120, 80],
        type: 'bar',
        barWidth: '60%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#409EFF' },
            { offset: 1, color: '#69b1ff' }
          ])
        }
      }
    ]
  })

  // 获取时间段问候语
  const getTimeOfDay = () => {
    const hour = new Date().getHours()
    if (hour < 12) return '早上'
    if (hour < 18) return '下午'
    return '晚上'
  }
</script>

<style lang="scss" scoped>
  .dashboard-container {
    padding: 20px;
    overflow-y: auto;
  }

  .stats-row,
  .charts-row {
    margin-top: 20px;
  }

  .stat-card {
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    position: relative;
    overflow: hidden;
  }

  .stat-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 40px;
    opacity: 0.1;
  }

  .user-icon {
    color: #409eff;
  }

  .view-icon {
    color: #20c997;
  }

  .download-icon {
    color: #f7ba1e;
  }

  .usage-icon {
    color: #f56c6c;
  }

  .chart-card {
    height: fit-content;
  }

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .chart-tabs {
    width: 200px;
  }

  .full-width-chart {
    /* height: 350px; */
  }

  .user-info-card {
    margin-bottom: 20px;
    .card-main {
      display: flex;
      gap: 20px;
      align-items: center;
      .user-info-main {
      }
    }
  }
</style>
